<template>
  <div class="box">
    <button class="add" @click="isAdd = true" @cc="changeData">添加</button>
    <table>
      <thead>
        <th>序号</th>
        <th>标题</th>
        <th>内容</th>
        <th>操作</th>
      </thead>
      <tbody>
        <tr v-for="(item, index) in news" :key="item.id">
          <td>{{ index + 1 }}</td>
          <td>{{ item.newName }}</td>
          <td>{{ item.newContent }}</td>
          <td>
            <button @click="isAdd = true">修改</button>
            <button @click="del(index)">删除</button>
          </td>
        </tr>
        <tr v-if="news.length == 0">
          <td colspan="4">暂无数据</td>
        </tr>
      </tbody>
    </table>
    <!-- 删除 -->
    <v-form v-if="isDel" @cD="changeDel"></v-form>
    <!-- 修改 -->
    <v-add v-if="isAdd" @cD="changeData"></v-add>
  </div>
</template>

<script>
// 删除的弹框
import vForm from "./form.vue";
// 修改的弹框
import vAdd from "./add.vue";

export default {
  components: {
    vForm,
    vAdd,
  },
  data() {
    return {
      isAdd: false,
      isDel: false,
      shu: null,
      news: [
        {
          id: 1,
          newName: "娱乐新闻",
          newContent: "娱乐新闻内容",
        },
        {
          id: 2,
          newName: "军事新闻",
          newContent: "军事新闻内容",
        },
        {
          id: 3,
          newName: "财经新闻",
          newContent: "财经新闻内容",
        },
      ],
    };
  },
  methods: {
    del(index) {
      this.isDel = true;
      this.shu = index;
    },
    changeData(cancel) {
      this.isAdd = cancel;
    },
    changeDel(cancel) {
      if (cancel[0] == 0) {
        this.isDel = cancel[1];
      } else {
        this.news.splice(this.index, 1);
        this.isDel = cancel[1];
      }
    },
  },
};
</script>

<style scoped>
/* 防止闪屏 */
[v-cloak] {
  display: none;
}

.box {
  width: 500px;
  height: 300px;
  /* background-color: pink; */
  margin: 100px auto;
}

button {
  width: 45px;
  height: 30px;
  background-color: skyblue;
  outline: none;
}
.add {
  margin: 0 0 10px 455px;
}

table {
  width: 500px;
  text-align: center;
  border-collapse: collapse;
  background-color: #fff;
}

td,
th {
  border: 1px solid salmon;
}
</style>
